<template>
    <div>
      <div class="whiteBac mt10 p10">
        <el-button type="primary" size="small" @click="dialogFormVisible = true">申请兑换</el-button>
      </div>
      <div class="whiteBac mt10 p10">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="处理中" name="first">
            <el-table
              :data="dealData"
              size="small"
              border
              style="width: 100%">
              <el-table-column
                prop="date"
                label="申请号">
              </el-table-column>
              <el-table-column
                prop="date"
                label="支付宝账户">
              </el-table-column>
              <el-table-column
                prop="date"
                label="申请时间">
              </el-table-column>
              <el-table-column
                prop="date"
                label="兑换珍珠">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="未通过" name="second">
            <el-table
              :data="noThroughData"
              size="small"
              border
              style="width: 100%">
              <el-table-column
                prop="date"
                label="申请号">
              </el-table-column>
              <el-table-column
                prop="date"
                label="支付宝账户">
              </el-table-column>
              <el-table-column
                prop="date"
                label="申请时间">
              </el-table-column>
              <el-table-column
                prop="date"
                label="兑换珍珠">
              </el-table-column>
              <el-table-column
                prop="date"
                label="拒绝时间">
              </el-table-column>
              <el-table-column
                prop="date"
                label="未通过原因">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已兑换" name="third">
            <el-table
              :data="exchangedData"
              size="small"
              border
              style="width: 100%">
              <el-table-column
                prop="date"
                label="申请号">
              </el-table-column>
              <el-table-column
                prop="date"
                label="支付宝账户">
              </el-table-column>
              <el-table-column
                prop="date"
                label="申请时间">
              </el-table-column>
              <el-table-column
                prop="date"
                label="兑换珍珠">
              </el-table-column>
              <el-table-column
                prop="date"
                label="通过时间">
              </el-table-column>
              <el-table-column
                prop="date"
                label="手续费">
              </el-table-column>
              <el-table-column
                prop="date"
                label="实际到账金额">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="mt10 tr">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <!--发布弹窗 begin-->
      <el-dialog width="40%" title="申请兑换" :visible.sync="dialogFormVisible">
        <el-form :model="pealForm" :rules="rules" ref="pealForm" label-width="80px" label-position="left">
          <div class="tr">
            <span class="fs12">当前可兑换103珍珠</span>
            <a href="javascipt:;" class="ml10 blue-color">全部兑换</a>
          </div>
          <el-form-item label="兑换数量" prop="number">
            <el-input v-model="pealForm.number"></el-input>
          </el-form-item>
          <el-form-item label="兑换金额" prop="money">
            <el-input v-model="pealForm.money"></el-input>
          </el-form-item>
          <el-form-item label="到账账户" prop="account">
            <el-input v-model="pealForm.account"></el-input>
          </el-form-item>
        </el-form>
        <div class="pealTip mt10 fs12">TIP：若需更改到账账户，请联系海贝管理员</div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="submitMethod('pealForm')">提交</el-button>
          <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--发布弹窗 end-->
    </div>
</template>

<script>
    export default {
        data() {
            return {
              page:1,
              total:20,
              pageSize:10,
              activeName: 'first',
              dealData:[{date:'111'}],
              noThroughData:[{date:'111'}],
              exchangedData:[{date:'111'}],
              dialogFormVisible:false,
              pealForm:{
                number:'',
                money:'',
                account:''
              },
              rules:{
                number:[
                  { required: true, message: '请输入兑换数量', trigger: 'blur' },
                  { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                money:[
                  { required: true, message: '请输入兑换金额', trigger: 'blur' },
                  { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                account:[
                  { required: true, message: '请输入到账账户', trigger: 'blur' },
                  { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ]
              }
            };
        },
        mounted() {

        },
        methods: {
          submitMethod(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          handleClick(tab, event){

          },
          handleCurrentChange(val){

          }
        }
    };
</script>
<style scoped></style>
